<template>
    <div class="app-container">
        <table-header-component v-on:create="create" v-on:getList="getList">
            <el-input v-model="searchForm.combos_name" placeholder="请输入标题" style="width: 200px;"></el-input>
            <el-select v-model="searchForm.status" placeholder="请选择状态">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in options.status" :key="item.value" :label="item.text" :value="item.value"></el-option>
            </el-select>
        </table-header-component>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="展示图" v-if="props.row.combos_images1">
                            <!--<el-tag>{{ props.row.tags }}</el-tag>-->
                            <img :src="'http://orrs4ojbz.bkt.clouddn.com/'+ props.row.combos_images1" class="avatar">
                        </el-form-item>
                        <el-form-item label="简介图" v-if="props.row.combos_images2">
                            <img :src="'http://orrs4ojbz.bkt.clouddn.com/'+ props.row.combos_images2" class="avatar">
                        </el-form-item>
                        <el-form-item label="原价格" v-if="props.row.combos_now_price" :show-overflow-tooltip="true" >
                            <span>{{ props.row.combos_now_price }}元</span>
                        </el-form-item>
                        <el-form-item label="优惠价" v-if="props.row.combos_ago_price" :show-overflow-tooltip="true" >
                            <span>{{ props.row.combos_ago_price }}元</span>
                        </el-form-item>
                        <el-form-item label="参数" v-if="props.row.parameter" :show-overflow-tooltip="true" >
                            <el-table
                                    :data="props.row.parameter"
                                    :show-header=false
                                    style="width: 100%">
                                <el-table-column
                                        prop="parameters_key"
                                        label="key"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="parameters_title"
                                        label="title"
                                        width="180">
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <el-form-item label="套餐内容" v-if="props.row.branch" :show-overflow-tooltip="true" >
                            <el-table
                                    :data="props.row.branch"
                                    :show-header=false
                                    style="width: 100%">
                                <el-table-column
                                        prop="branch_title"
                                        label="key"
                                        :show-overflow-tooltip="true"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="branch_content"
                                        label="title"
                                        :show-overflow-tooltip="true"
                                        width="180">
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="套餐标题"
                    prop="combos_name">
            </el-table-column>
            <el-table-column
                    label="排序"
                    prop="order">
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    prop="created_at"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="small"  type="info" @click="detail_parameter(scope.row.id)">参数修改</el-button>
                    <el-button size="small"  type="info" @click="detail_branch(scope.row.id)">内容修改</el-button>
                    <el-button size="small" @click="trashed(scope.row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination-component ref="pagination" v-on:getList="getList"></pagination-component>
        <!--添加修改参数-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form class="small-space" :model="dynamicValidateForm" :rules="rules" ref="dynamicValidateForm" label-position="left" label-width="100px">
                <input type="hidden" v-model="dynamicValidateForm.id">
                <el-form-item
                        v-for="(domain, index) in dynamicValidateForm.domains"
                        :label="'参数' + index"
                        :key="domain.key"
                        :prop="'domains.' + index + '.value'">
                    <el-input v-model="domain.parameters_key" placeholder="参数标题" style="width:150px;"></el-input>
                    <el-input v-model="domain.parameters_title" placeholder="参数内容" style="width:50%;"></el-input>
                    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                </el-form-item>
                <el-button @click="addDomain">新增参数</el-button>            </el-form>
            <dialog-footer-component v-on:submit="submit(formName = 'dynamicValidateForm')" v-on:close="close"></dialog-footer-component>
        </el-dialog>
        <!--添加修改内容-->
        <el-dialog :title="formTitle" :visible.sync="branchVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form class="small-space" :model="branchValidateForm" :rules="rules" ref="branchValidateForm" label-position="left" label-width="100px">
                <input type="hidden" v-model="branchValidateForm.id">
                <el-form-item
                        v-for="(domain, index) in branchValidateForm.domains"
                        :label="'参数' + index"
                        :key="domain.key"
                        :prop="'domains.' + index + '.value'">
                    <el-input v-model="domain.branch_title" placeholder="标题 如:适应人群" style="width:150px;"></el-input>
                    <el-input type="textarea" v-model="domain.branch_content" placeholder="内容" style="width:50%;"></el-input>
                    <!--<quill-edit class="interactive-now-content" v-model="domain.branch_content" :options="editorOption"></quill-edit>-->
                    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                </el-form-item>
                <el-button @click="addDomains">新增参数</el-button>            </el-form>
            <dialog-footer-component v-on:submit="submits(formName = 'branchValidateForm')" v-on:close="closes"></dialog-footer-component>
        </el-dialog>
    </div>
</template>
<script>
    import PaginationComponent from '../../common/pagination-component.vue';
    import TableHeaderComponent from '../../common/table-header-component.vue';
    import DialogFooterComponent from '../../common/dialog-footer-component.vue';
    import { quillEditor } from 'vue-quill-editor';

    export default {
        components: {
            'pagination-component': PaginationComponent,
            'table-header-component': TableHeaderComponent,
            'dialog-footer-component': DialogFooterComponent,
            'quill-edit': quillEditor,

        },
        data() {
            return {
                    formTitle: '',
                    formVisible:false,
                    branchVisible:false,
                    tableData: [],
                    parameterData: [],
                    searchForm: {
                        combos_name: '',
                        combos_now_price: '',
                        created_at: '',
                        status: '',
                    },
                    options: {
                        status: [],
                        categories: []
                    },
                    dynamicValidateForm: {
                        domains: [{
                            parameters_key: '',
                            parameters_title:'',
                        }],
                        combo_id:'',
                    },
                    editorOption: {
                        modules: {
                            toolbar: [
                                ['bold', 'italic', 'underline', 'strike'],
                                ['blockquote', 'code-block'],
                                [{ 'header': 1 }, { 'header': 2 }],
                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                [{ 'script': 'sub' }, { 'script': 'super' }],
                                [{ 'indent': '-1' }, { 'indent': '+1' }],
                                [{ 'direction': 'rtl' }],
                                [{ 'size': ['small', false, 'large', 'huge'] }],
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                                [{ 'color': [] }, { 'background': [] }],
                                [{ 'font': [] }],
                                [{ 'align': [] }],
                                ['clean'],
                                ['link', 'image', 'video']
                            ]
                        }
                    },
                    branchValidateForm: {
                        domains: [{
                            branch_title: '',
                            branch_content:'',
                        }],
                        combo_id:'',
                    }
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                let _this = this;
                let search = {
                    'combos_name': _this.searchForm.combos_name,
                };
                let paramsData = { 'data': { 'search': search } };
                axios.get('/backend/combos?page=' + _this.$refs.pagination.pageData.current_page, { params: paramsData }).then(response => {
                    let { status, data, message } = response.data;
                    _this.tableData = data.lists.data;
                    _this.$refs.pagination.pageData.per_page = parseInt(data.lists.per_page);
                    _this.$refs.pagination.pageData.current_page = parseInt(data.lists.current_page);
                    _this.$refs.pagination.pageData.total = parseInt(data.lists.total);
                })
            },
            create() {
                this.$router.push({path:'combo/create'});
            },
            detail_parameter(id){
                let _this = this;
                let OneSearch = {'id': id,};
                Vue.resetForm(_this.dynamicValidateForm);
                let paramsData = { 'data': { 'search': OneSearch } };
                axios.get('/backend/combos', { params: paramsData }).then(response => {
                    let { status, data, message } = response.data;
                    _this.formTitle = '修改参数';
                    _this.formVisible = true;
                    _this.dynamicValidateForm.combo_id=id;
                    _this.dynamicValidateForm.domains=data.lists.data[0].parameter;
                })
            },
            detail_branch(id){
                let _this = this;
                let OneSearch = {'id': id,};
                Vue.resetForm(_this.branchValidateForm);
                let paramsData = { 'data': { 'search': OneSearch } };
                axios.get('/backend/combos', { params: paramsData }).then(response => {
                    let { status, data, message } = response.data;
                    _this.formTitle = '修改内容';
                    _this.branchVisible = true;
                    _this.branchValidateForm.combo_id=id;
                    _this.branchValidateForm.domains=data.lists.data[0].branch;
                })
            },
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            close(){
                let _this = this;
                _this.formVisible = false;
                _this.dynamicValidateForm.domains=[{value: ''}];
            },
            closes(){
                let _this = this;
                _this.branchVisible = false;
                _this.branchValidateForm.domains=[{value: ''}];
            },
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
            addDomains() {
                this.branchValidateForm.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
            submit(formName){
                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('backend/comment/parameter', { 'data': _this.dynamicValidateForm }).then(response => {
                            let {status, data, message} = response.data;
                            if (!status) {
                                _this.$message.error(message);
                                return false;
                            }
                            _this.$message.success(message);
                            _this.formVisible = false;
                            this.getList();
                        });
                    }
                });
            },
            submits(formName){
                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('backend/comment/branch', { 'data': _this.branchValidateForm }).then(response => {
                            let {status, data, message} = response.data;
                            if (!status) {
                                _this.$message.error(message);
                                return false;
                            }
                            _this.$message.success(message);
                            _this.branchVisible = false;
                            this.getList();
                        });
                    }
                });
            },
            trashed(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/backend/combos/destroy', { 'data': id }).then(response => {
                        let {status, data, message} = response.data;
                        if (!status) {
                            _this.$message.error(message);
                            return false;
                        }
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    }
</script>